<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入依赖包 -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 绑定事件 -->
        <button v-on:click="add">点击加1</button>
        <button v-on:click="minus">点击减1</button>
        <button @click="die">销毁VM</button>
        <h1 ref="cur">计数器:{{count}}</h1>
    </div>
</body>

</html>
<script>
    //创建VM
    let VM = new Vue({
        //VM关联挂载点
        el: '#app',
        computed:{
           title(){
               return "测试";
           }
        },
        //VM属性
        data: {
            count: 1
        },
        // VM方法
        methods: {
            //VM对象添加的方法
            add() {
                this.count++;
            },
            //  VM对象的方法
            minus() {
                this.count--;
            },
            die(){
              //VM实例的方法-销毁VM 
              //VM实例的一个方法，可以销毁VM 
              this.$destroy();
            }
        },
        //beforeCreate:错误的理解，VM创建之前
        //VM实例未完全初始化完毕
        beforeCreate(){
          //当前beforeCreate钩子函数执行：VM实例未完全初始化的时候执行的
          //因为VM为完全初始化完毕:不能获取VM实例的属性、方法
          console.log("beforeCreate",this.count,this.add,this.title);
        }
        ,
        //VM实例初始化完毕
        //在钩子函数当中：可以获取VM实例的属性、方法、计算属性、watch等等都可以
        created(){
          console.log('created:VM实例初始化完毕',this.count,this.title)
        },
        //VM实例挂载到容器之前会执行
        beforeMount(){
          //VM挂载容器之前会执行一次，获取不到真实DOM节点
          console.log('beforeMount:VM实例挂载之前',this.$refs.cur)
        },
        //VM挂载完毕,[VM初始化完毕,模板当中真实的DOM都挂载完毕了] ******
        //这个钩子函数：将来经常发ajax请求
        mounted(){
            //经常发ajax请求，获取服务器数据替换数据
            console.log("mounted:VM挂载完毕，真实DOM存在了",this.$refs.cur)
        }
        ,
        //当响应式数据发生变化之前，更新一次
        beforeUpdate(){
          console.log('beforeUpdate',this.count);
        },
        //响应式数据更新完毕会执行一次
        updated(){
            console.log('updated',this.count);
        },
        //VM销毁之前
        beforeDestroy(){
            console.log('VM销毁之前');
        },
        //VM销毁完毕
        //做一些其他的事情，收尾的操作
        destroyed(){
           console.log('VM销毁完毕');  
        }
    })
</script>